<%@ page import="com.deepai.dprsmgr.utils.ErrCode" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../base_path.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">
    <title>添加业务模板</title>
</head>
<body>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
    </button>
    <h4 class="modal-title" id="myModalLabel">
        添加业务模板
    </h4>
</div>
<div class="modal-body">
    <form id="form_create_business_template" class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-3 control-label">
                <label class="text-danger" style="margin-right: 5px">*</label>模板名称</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="txt_template_name" name="txt_template_name" placeholder="只支持文、字母、数字、括号、下划线，且不能以下划线开头或结尾" maxlength="60">
                <span id="template_name_Help" class="help-block"></span>
            </div>
			<span class="glyphicon glyphicon-ok col-xs-1" style="line-height: 29px;padding: 0;color:#17823b;display: none;"></span>
			<span class="glyphicon glyphicon-remove col-xs-1" style="line-height: 29px;padding: 0;color:#a94442;display: none;"></span>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label">
                <label class="text-danger" style="margin-right: 5px">*</label>模板编码</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="txt_template_code" name="txt_template_code" placeholder="只支持文、字母、数字、括号、下划线，且不能以下划线开头或结尾" maxlength="60">
                <span id="template_code_Help" class="help-block"></span>
            </div>
			<span class="glyphicon glyphicon-ok col-xs-1" style="line-height: 29px;padding: 0;color:#17823b;display: none;"></span>
			<span class="glyphicon glyphicon-remove col-xs-1" style="line-height: 29px;padding: 0;color:#a94442;display: none;"></span>
        </div>
        <div class="form-group has-feedback">
            <label class="col-xs-3 control-label">
                <label class="text-danger" style="margin-right: 5px"></label>任务地址</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="txt_template_robot_addr" name="txt_template_robot_addr" placeholder="只支持ip或域名" maxlength="50">
                <span class='glyphicon glyphicon-ok form-control-feedback hide' aria-hidden='true'></span>
                <span class='glyphicon glyphicon-remove form-control-feedback hide' aria-hidden='true'></span>
                <span id="template_robot_addr_Help" class="help-block"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label">备注</label>
            <div class="col-xs-8">
                <textarea class="form-control" id="txt_template_comment" name="txt_template_comment" placeholder="只能包含中文、英文、数字、下划线、逗号、句号，最多输入80个字..." maxlength="80"></textarea>
				 <span class="help-block"></span>
            </div>
        </div>

        <div class="form-group text-c">
                <button type="submit" class="btn btn-primary btn-sm btn-s">提交</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        var checkTemplateNameUrl = "<%=basePath%>/call_config/businessTemplate/checkTemplateNameUniqueness.do";
        var $templateName = $("#txt_template_name");
        var $templateCode = $("#txt_template_code");
        var $templateRobotAddr = $("#txt_template_robot_addr");
        var $templateComment = $("#txt_template_comment");
        // 校验名称唯一性
//         $templateName.keyup(function () {
//             var templateName = $(this).val().trim();
//             console.log(regexCheckName(templateName));
//             checkNameCorrect($(this), templateName, checkTemplateNameUrl + "?" + "templateName=" + templateName);
//         }).bind("paste",function(){
//             var templateName = $(this).val().trim();
//             checkNameCorrect($(this), templateName, checkTemplateNameUrl + "?" + "templateName=" + templateName);
//         }).css("ime-mode", "disabled");
// 
//         $templateCode.keyup(function () {
//             var templateCode = $(this).val().trim();
//             checkCodeCorrect($(this), templateCode);
//         }).bind("paste",function(){
//             var templateCode = $(this).val().trim();
//             checkCodeCorrect($(this), templateCode);
//         }).css("ime-mode", "disabled");

//         $templateRobotAddr.on("propertychange input",function () {
//             var $val=$.trim(this.value);
//            if(/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{0,5})?$/.test($val )
//                || /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/.test( $val) || $val.length == 0){
//             //通过
//                 $(this).closest(".form-group").removeClass("has-error").addClass("has-success");
//                $(this).siblings(".glyphicon-ok").removeClass("hide").siblings(".glyphicon-remove").addClass("hide");
//            }else{
//            //不通过
//                $(this).closest(".form-group").removeClass("has-success").addClass("has-error");
//                $(this).siblings(".glyphicon-ok").addClass("hide").siblings(".glyphicon-remove").removeClass("hide");
//            }
//         });
		$("#form_create_business_template").validate({
		    errorPlacement: function (error, element) {
		        // Append error within linked label
		        //console.log(element)
		        $(element)
		            .closest("div.form-group")
		            .find("span.help-block")
		            .append(error);
		    },
		    errorElement: "p",
		    rules: {
		        txt_template_name: {
		            required: true,
		            isNameTemplate: true,
		            remote:{
		                type:"POST",
		                url:checkTemplateNameUrl, //请求地址
		                data:{
		                    templateName:function(){ return $templateName.val(); }
		                } ,
		                dataFilter:function(data){
		                    if(typeof(data) == "string"){
		                        data=JSON.parse(data);
		                    }
		                    if(data.errorCode == "0"){
		                        return true;
		                    }else{
		                        return false;
		                    }
		                }
		            }
		        },
		        txt_template_code: {
		            required: true,
					isNameTemplate: true,
		        },
		        txt_template_robot_addr:{
		            isIp:true,
		        },
                txt_template_comment: {
					commentCheck: true
				},
		    },
		    messages: {
		        txt_template_name: {
		            required: "模板名称不能为空，请输入名称",
					isNameTemplate: "字符或格式有误，只支持中文、字母、数字、括号、下划线，且不能以下划线开头或结尾",
		            remote:"模板名称已存在，请重新输入"
		        },
		        txt_template_code: {
		            required: "模板编码不能为空，请输入",
					isNameTemplate: "字符或格式有误，只支持中文、字母、数字、括号、下划线，且不能以下划线开头或结尾",
		        },
		        txt_template_robot_addr:{
		            isIp:"只支持ip或域名",
		        },
                txt_template_comment: {
					commentCheck:"只能包含中文、英文、数字、下划线、逗号、句号"
				},
		    }
		});
		
		$templateName.on('input', function(e) {
			var flag = $("#form_create_business_template").validate().element($templateName)
			if(flag) {
				$templateName.closest('.form-group').find('.glyphicon-ok').show();
				$templateName.closest('.form-group').find('.glyphicon-remove').hide();
			}else {
				$templateName.closest('.form-group').find('.glyphicon-ok').hide();
				$templateName.closest('.form-group').find('.glyphicon-remove').show();
			}
		})
		
		$templateCode.on('input', function(e) {
			var flag = $("#form_create_business_template").validate().element($templateCode)
			if(flag) {
				$templateCode.closest('.form-group').find('.glyphicon-ok').show();
				$templateCode.closest('.form-group').find('.glyphicon-remove').hide();
			}else {
				$templateCode.closest('.form-group').find('.glyphicon-ok').hide();
				$templateCode.closest('.form-group').find('.glyphicon-remove').show();
			}
		})
		

        $("#form_create_business_template").submit(function (event) {
			event.preventDefault();
			if(!$("#form_create_business_template").valid()) {
				return false
			}
            var templateName = $.trim($templateName.val());
            var templateCode = $.trim($templateCode.val());
            var templateComment = $.trim($templateComment.val());
            // 这里用的是this，如果是Form的话需要Form[0]
            var formData = new FormData(this);
            formData.append("templateName", templateName);
            formData.append("templateCode", templateCode);
            formData.append("jobUrl",$.trim($templateRobotAddr.val()));
            formData.append("templateComment", templateComment);
            $.ajax({
                url: '<%=basePath%>/call_config/businessTemplate/addBusinessTemplate.do',
                type: 'POST',
                data: formData,
                // 这两个参数需要被定义，否则报错
                contentType: false,
                processData: false,
                success: function (data) {
//                    parent.layer.close(layerIndex);
                    if (data["errorCode"] == '<%=ErrCode.ERR_CODE_SUCCESS%>') {
                        $("#modal_create_business_template").modal('hide');
                        myNotify("success", "", "添加成功！");
                    } else if (data["errorCode"] == "<%=ErrCode.BUSINESS_TEMPLATE_ERR_CODE_UNIQUENESS%>") {
                        myNotify("error", "", data["msg"]);
                    } else {
                        myNotify("error", "", "添加失败！");
                    }
                },
                error: function () {
                    myNotify("error", "", "创建过程中发生错误，请尽快联系管理员！");
                }
            });
            return false;
        });


    });
    /******************************方法声明**********************************/



</script>
</body>
</html>